<template>
  <el-table :data="tableData.filter(data => !search || data.id == search)" style="min-width: 300px" direction="vertical"
    stripe>
    <el-table-column label="ID" prop="id">
    </el-table-column>
    <el-table-column label="发布时间" prop="postTime">
    </el-table-column>
    <el-table-column label="作者" prop="authorName">
    </el-table-column>
    <el-table-column label="稿件名" prop="title">
    </el-table-column>
    <el-table-column align="right">
      <template slot="header">
        <!-- <a-input v-model="search" placeholder="输入稿件id搜索" @input="change()" /> -->
        <input v-model="search" placeholder="输入稿件id搜索" class="search" />
        <!-- <el-input v-model="search" size="mini" placeholder="输入关键字搜索" /> -->
      </template>
      <template slot-scope="scope">
        <el-button size="mini" @click="viewDetails(scope.row)">查看详情</el-button>
        <el-button size="mini" type="success" @click="recommendRoute(scope.$index, scope.row)"
          v-if="scope.row.recommend === false">创作推广</el-button>
        <el-button size="mini" type="info" @click="recommendRoute(scope.$index, scope.row)" v-else>取消推广</el-button>
        <el-button size="mini" type="danger" @click="deleteRoute(scope.$index, scope.row)">删除路线</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from '@/API/request';
import { Message } from 'element-ui';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      tableData: [],
      search: ''
    }
  },
  methods: {
    viewDetails(row) {
      this.$router.push({
        path: '/route',
        query: {
          id: row.id,
        }
      });
    },
    recommendRoute(index, row) {
      if (row.recommend === false) {
        request.get('/route/popularize', {
          params: {
            routeId: row.id
          }
        }).then(res => {
          if (res.data.code === 200) {
            Message({
              message: '推广成功',
              type: 'success',
              customClass: 'message-global'
            });
            this.tableData[index].recommend = true;
          } else {
            Message({
              message: res.data.msg,
              type: 'error',
              customClass: 'message-global'
            });
          }
        });
      } else {
        request.get('/route/cancelPopularize', {
          params: {
            routeId: row.id
          }
        }).then(res => {
          if (res.data.code === 200) {
            Message({
              message: '取消推广成功',
              type: 'success',
              customClass: 'message-global'
            });
            this.tableData[index].recommend = false;
          } else {
            Message({
              message: res.data.msg,
              type: 'error',
              customClass: 'message-global'
            });
          }
        });
      }
    },
    deleteRoute(index, row) {
      request.get('/route/delete', {
        params: {
          userId: this.$store.state.userInfo.id,
          routeId: row.id
        }
      }).then(res => {
        if (res.data.code === 200) {
          Message({
            message: '删除成功',
            type: 'success',
            customClass: 'message-global'
          });
          this.tableData.splice(index, 1);
        } else {
          Message({
            message: res.data.msg,
            type: 'error',
            customClass: 'message-global'
          });
        }
      }).catch(err => {
        Message({
          message: err,
          type: 'error',
          customClass: 'message-global'
        })
      });
    }
  },
  mounted() {
    request.get('/route/checkPassedList').then(res => {
      if (res.data.code === 200) {
        this.tableData = res.data.data;
        this.tableData.sort((a, b) => {
          const time1 = dayjs(a.postTime);
          const time2 = dayjs(b.postTime);
          return time2.diff(time1);
        }).map(data => {
          data.postTime = dayjs(data.postTime).format('YYYY-MM-DD')
        })
      } else {
        Message({
          message: res.data.msg,
          type: 'error',
          customClass: 'message-global'
        });
      }
    });
  }
}

</script>

<style scoped>
.search {
  width: 100%;
  height: 30px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  transition: all 0.3s ease;
}

::-webkit-input-placeholder {
  color: #969696;
}

.search:focus {
  border-color: #409eff;
  outline: none;
}

.search:focus::-webkit-input-placeholder {
  color: #c0c4cc;
}

.search:hover {
  outline: none;
  border-color: #409eff;
}
</style>